<script setup lang="ts">
    import { ref, computed, defineProps, watch } from 'vue';
    import { useRoute } from 'vue-router';
    import { useUserStore } from '@/stores/user';
    import { useChatStore } from '@/stores/chat';
    import type { UserInfo } from '@/services/type';

    import BasicInfoDialog from '@/views/Main/User/Dialog/BasicInfo/index.vue';
    import UploadIconDialog from '@/views/Main/User/Dialog/UploadIcon/index.vue';

    const coverRef = ref();
    const chatStore = useChatStore();
    const userStore = useUserStore();
    const route = useRoute();

    // 属性
    const props = defineProps<{ type: number, userInfo?: any }>();

    // 是否显示用户基本信息查看框
    const isShowBasicInfoDialog = ref(false);
    // 是否显示用户头像上传框
    const isShowUploadIconDialog = ref(false);
    // 用户内码
    const yhnm = ref(route.params.userId);
    // 用户消息
    const userInfo = ref<Partial<UserInfo>>({});

    // 是否当前用户
    const isCurrentUser = computed(() => userStore.userInfo.yhnm === (yhnm.value ? yhnm.value.toString() : ''));

    // 上传封面图片
    const uploadCover = () => {
        const fileInput = coverRef.value;
        if(fileInput) {
            const file = fileInput.files[0];
            const url = URL.createObjectURL(file);
            userStore.userInfo.cover = url;
        }
    }

    // 关注
    const handleFollow = async (yhnm?: string, is_follow?: boolean) => {
        const response = await userStore.follow(yhnm, is_follow);
        if(response.code === 0) {
            // 变更关注状态
            userInfo.value.is_follow = !is_follow;
        }
    }

    // 监听用户信息变化
    watch(
        () => props.userInfo,
        (data) => {
            userInfo.value = data;
        }
    );

</script>
<template>
    <div class="main">
        <div class="m-padded-tb-max" style="flex: 1 0 auto;">
            <div class="ui container">
                <!-- 用户个人中心封面 -->
                <div class="box user-cover">
                    <div class="user-wrap" :style="{'background-image': 'url(' + userInfo?.cover + ')'}">
                        <div class="user-upload-cover btn" v-if="type === 1">
                            <label class="empty button">
                                <span>上传封面图片</span>
                                <input 
                                    ref="coverRef"
                                    class="cover-input" 
                                    type="file" 
                                    accept="image/jpg,image/jpeg,image/png" 
                                    @change="uploadCover"
                                    style="display:none">
                            </label>
                        </div>
                        <el-popover
                            v-if="type === 2"
                            placement="top-end"
                            width="120"
                            effect="light"
                            trigger="click"
                        >
                            <ul class="more-ul">
                                <li class="more-li-item">
                                    <a class="information" @click="isShowBasicInfoDialog = true">
                                        <svg-icon href='#icon-moreInfo' class="more-icon" width="14px" height="14px"></svg-icon>&nbsp;<span class="information-name">更多资料</span>
                                    </a>
                                </li>
                            </ul>
                            <template #reference>
                                <div class="user-more btn">
                                    <svg-icon href='#icon-more' class="more-icon"></svg-icon>
                                </div>
                            </template>
                        </el-popover>
                    </div>
                    <div class="user-panel">
                        <div class="avatar" :style="{'background-image': 'url(' + userInfo?.avatar + ')'}">
                            <div v-if="type === 1" class="avatar-hover" @click="isShowUploadIconDialog = true">
                                <img src="">
                            </div>
                        </div>
                        <div class="user-panel-info">
                            <div>
                                <h1><span class="username">{{ userInfo?.nickName }}</span></h1>
                                <p>{{ userInfo?.signature ? userInfo?.signature : "这家伙很懒，什么都没有写..." }}</p>
                            </div>
                        </div>
                        <div class="btn" v-if="!isCurrentUser && type === 2">
                            <el-button 
                                :type="!userInfo.is_follow ? 'primary' : ''" 
                                @click="handleFollow(userInfo?.yhnm, userInfo.is_follow)" 
                                :color="userInfo.is_follow ? '#8a919f' : ''"
                                style="margin-right: 5px;"
                                plain
                            >
                                <template v-if="!userInfo.is_follow">
                                    <el-icon><Plus /></el-icon>&nbsp;关注
                                </template>
                                <template v-if="userInfo.is_follow">
                                    <el-icon><Check /></el-icon>&nbsp;已关注
                                </template>
                            </el-button>
                            <el-button type="info" @click="chatStore.isShowChatBox = true" style="margin-left: 5px;">
                                <el-icon><Message /></el-icon>&nbsp;私信
                            </el-button>
                        </div> 
                        <div class="btn" v-if="type === 1">
                            <div>
                                <el-button 
                                    type="primary" 
                                    @click="$router.push({ path: '/u/11111111111' })"
                                    plain
                                >
                                    <el-icon><HomeFilled /></el-icon>&nbsp;我的主页
                                </el-button>
                            </div>
                        </div>
                    </div>
                </div>
                <slot></slot>
            </div>
        </div>
    </div>
    <!-- 用户基本信息查看框 -->
    <basic-info-dialog :visible="isShowBasicInfoDialog" :userInfo="userInfo" @close="isShowBasicInfoDialog = false" />
    <!-- 用户头像上传框 -->
    <upload-icon-dialog :visible="isShowUploadIconDialog" @close="isShowUploadIconDialog = false" />
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" />